<template>
  <div class="strut-div party-build-sex">
    <div id="pbSex" style="height: 170px;"></div>
    <div class="sex-man">
      男性（人）<br />
      <span style="" class="lcd-font">{{man}}</span>
    </div>
    <div class="sex-woman">
      女性（人）<br />
      <span style="" class="lcd-font">{{woman}}</span>
    </div>
  </div>
</template>

<script>
  // import sexData from '../../../../static/ht-party-sex.json';
  import echarts from 'echarts';

//   var data = [{
//       name: '男',
//       value: sexData[1]
//     },
//     {
//       name: '女',
//       value: sexData[0]
//     }
//   ];
//   var total = sexData[1] + sexData[0];

//   var seriesArr = [];
//   var colors = [
//     ['#389af4', '#dfeaff'],
//     ['#fd6f97', '#fed4e0']
//   ];
//   data.forEach(function (item, index) {
//     seriesArr.push({
//       name: item.name,
//       type: 'pie',
//       clockWise: false,
//       radius: [50, 60],
//       itemStyle: {
//         normal: {
//           color: colors[index][0],
//           shadowColor: colors[index][0],
//           shadowBlur: 0,
//           label: {
//             show: false
//           },
//           labelLine: {
//             show: false
//           }
//         }
//       },
//       hoverAnimation: false,
//       center: [index * 50 + 24.5 + '%', '50%'],
//       data: [{
//           value: item.value,
//           label: {
//             normal: {
//               formatter: '{d}%',
//               position: 'center',
//               show: true,
//               textStyle: {
//                 fontSize: '20',
//                 fontWeight: 'bold',
//                 color: colors[index][0]
//               }
//             }
//           }
//         },
//         {
//           value: total - item.value,
//           name: 'invisible',
//           itemStyle: {
//             normal: {
//               color: colors[index][1]
//             },
//             emphasis: {
//               color: colors[index][1]
//             }
//           }
//         }
//       ]
//     });
//   });

//   var option = {
//     series: seriesArr
//   };

  export default {
    data() {
      return {
        man: '',
        woman: ''
      };
    },
    mounted() {
      this.getSexData();
    },
    methods: {
      getSexData() {
          this.$get(this.$api.getSexChart,{
              deptId:localStorage.getItem('mapId')
          }).then(res => {
              if (res.code === 200) {
                  this.initChart(res.data);
              }
          });
      },
      initChart(sexJson = {}) {
        var data = [{
            name: '男',
            value: sexJson[1]
          },
          {
            name: '女',
            value: sexJson[0]
          }
        ];
        var total = sexJson[1] + sexJson[0];

        var seriesArr = [];
        var colors = [
          ['#389af4', '#dfeaff'],
          ['#fd6f97', '#fed4e0']
        ];
        data.forEach(function (item, index) {
          seriesArr.push({
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [50, 60],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            center: [index * 50 + 24.5 + '%', '50%'],
            data: [{
                value: item.value,
                label: {
                  normal: {
                    formatter: '{d}%',
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold',
                      color: colors[index][0]
                    }
                  }
                }
              },
              {
                value: total - item.value,
                name: 'invisible',
                itemStyle: {
                  normal: {
                    color: colors[index][1]
                  },
                  emphasis: {
                    color: colors[index][1]
                  }
                }
              }
            ]
          });
        });

        var option = {
          series: seriesArr
        };

        var chart = echarts.init(document.getElementById('pbSex'));
        chart.setOption(option);
      }
    }
  };

</script>

<style scoped>
  .sex-man {
    width: 50%;
    float: left;
    text-align: center;
  }

  .sex-woman {
    width: 50%;
    float: left;
    text-align: center;
  }

  .party-build-sex>div>span {
    font-size: 40px;
    color: #FDD100;
    display: inline-block;
    margin-top: 10px;
  }

</style>
